<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-08-15 16:45:26
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2022-09-15 10:58:45
 * @FilePath: \ahbs\uc_sys\src\views\UserCenter\Org\Role\components\Edit.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { PropType, watch, ref, reactive } from 'vue'
import { ElTag } from 'element-plus'
import { Form } from '@/components/Form'
// import { menuTreeApi } from '@/api/menu'
import { useForm } from '@/hooks/web/useForm'
import { required } from '@/utils/formRules'

const props = defineProps({
  formData: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  roleData: {
    type: Array as PropType<any>,
    default: () => []
  }
})
const defaultProps = {
  children: 'children',
  label: 'role_name'
}
const newRoleData = ref<any[]>([])
const schema = reactive<FormSchema[]>([
  {
    field: 'role_name',
    label: '角色名称',
    component: 'Input',
    formItemProps: {
      rules: [required]
    }
  },
  {
    field: 'parent_id',
    label: '父级角色',
    component: 'TreeSelect',
    componentProps: {
      data: newRoleData,
      'node-key': 'role_id',
      'check-strictly': true,
      'default-expand-all': true,
      props: defaultProps,
      clearable: false
    }
  },
  // {
  //   field: 'is_sys',
  //   label: '是否系统角色',
  //   component: 'Select',
  //   componentProps: { options: dict.is }
  // },
  {
    field: 'note',
    label: '描述',
    component: 'Input',
    componentProps: { type: 'textarea' },
    colProps: { span: 24 }
  }
])

const { register, methods, elFormRef } = useForm({
  schema
})

watch(
  () => props.formData,
  (value) => {
    if (!value) return
    const { setValues } = methods
    setValues(value)
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => props.roleData,
  (value) => {
    if (!value) return
    newRoleData.value = value
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  elFormRef,
  getFormData: methods.getFormData,
  oldFormData: props.formData
})
</script>

<template>
  <div>
    <Form @register="register">
      <template v-if="props.formData.is_sys === '1'" #parent_id></template>
      <template v-if="props.formData.is_sys === '1'" #parent_id-label>
        <ElTag>系统角色</ElTag></template
      >
    </Form>
  </div>
</template>
